<template>
<div style="padding: 0; margin: 0; height: 100%">

  <el-col :span="8">
    <div class="board-body" style="float: left">
      <div class="cloumn-header">
        <div class="column-title-container">
          <div class="column-title">待办的</div>
          <div class="column-title issue-count">{{todoCount}}</div>
        </div>
      </div>
      <div>
        <el-card shadow="hover" style="margin-top: 10px;" v-for="list in todoList" :key="list.id">
        <div slot="header">
          <span class="el-icon-star-on "
                :class="{'NORMAL':list.type ==='任务', 'LOW':list.type ==='需求', 'CRITICAL':list.type ==='缺陷'}"></span>
          <span>{{ list.taskName }}
            <el-tag v-show="list.priority === 1" type="danger" effect="dark" style="margin-left: 10px;border-radius: 18px;">紧急</el-tag>
          </span>
<!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          <div style="float: right; padding: 3px 0" >
            <el-select
              v-model="list.status"
              placeholder="请选择"
              @change="setTaskStatusInWork(list.id,list.status)"
              :disabled="statusDisabled"
              style="width: 100px;margin-top: -10px;margin-right: -10px"
            >
              <el-option
                v-for="item in statusSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
<!--            {{ statusValue[list.status] }}-->
          </div>
        </div>
          <div @click="showTaskInfo(list.id)" style="cursor: pointer">
            <div class="content">
              {{ list.taskContent }}
            </div>
            <div class="bottom">
              {{ list.projectName }}
              <span style="margin-left: 20px"
                    class=" el-icon-top"
                    :class="{'CRITICAL':list.priority === 1,'MAJOR':list.priority === 2,
                    'NORMAL':list.priority === 3,'LOW':list.priority === 4,'TRIVIAL':list.priority === 5 }"
              ></span>
              <div class="image">
                <!--              <img :src="user.userFace" :alt="user.name" :title="user.name" class="userface-img">-->
                <el-avatar size="small" :src="user.userFace"></el-avatar>
              </div>
            </div>
          </div>

        </el-card>
      </div>
    </div>
  </el-col>

  <el-col :span="8">
    <div class="board-body" style="float: left">
      <div class="cloumn-header">
        <div class="column-title-container">
          <div class="column-title">进行中</div>
          <div class="column-title issue-count">{{doingCount}}</div>
        </div>
      </div>
      <div>
          <el-card shadow="hover" style="margin-top: 10px;" v-for="list in doingList" :key="list.id">
            <div slot="header">
          <span class="priority-icon el-icon-star-on "
                :class="{'NORMAL':list.type ==='任务', 'LOW':list.type ==='需求', 'CRITICAL':list.type ==='缺陷'}"></span>
              <span>{{ list.taskName }}
            <el-tag v-show="list.priority === 1" type="danger" effect="dark" style="margin-left: 10px;border-radius: 18px;">紧急</el-tag>
          </span>
              <!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
              <div style="float: right; padding: 3px 0" >
                <el-select
                  v-model="list.status"
                  placeholder="请选择"
                  @change="setTaskStatusInWork(list.id,list.status)"
                  :disabled="statusDisabled"
                  style="width: 100px;margin-top: -10px;margin-right: -10px"
                >
                  <el-option
                    v-for="item in statusSelect"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
<!--                {{ statusValue[list.status] }}-->
              </div>
            </div>
            <div @click="showTaskInfo(list.id)" style="cursor: pointer">
              <div class="content">
                {{ list.taskContent }}
              </div>
              <div class="bottom">
                {{ list.projectName }}
                <span style="margin-left: 20px"
                      class="priority-icon el-icon-top"
                      :class="{'CRITICAL':list.priority === 1,'MAJOR':list.priority === 2,
                    'NORMAL':list.priority === 3,'LOW':list.priority === 4,'TRIVIAL':list.priority === 5 }"
                ></span>
                <div class="image">
                  <!--              <img :src="user.userFace" :alt="user.name" :title="user.name" class="userface-img">-->
                  <el-avatar size="small" :src="user.userFace"></el-avatar>
                </div>
              </div>
            </div>
          </el-card>
        </div>
    </div>
  </el-col>

  <el-col :span="8">
    <div class="board-body" style="float: left">
      <div class="cloumn-header">
        <div class="column-title-container">
          <div class="column-title">已完成</div>
          <div class="column-title issue-count">{{doneCount}}</div>
        </div>
      </div>
      <div>
        <el-card shadow="hover" style="margin-top: 10px;" v-for="list in doneList" :key="list.id">
          <div slot="header">
          <span class="priority-icon el-icon-star-on "
                :class="{'NORMAL':list.type ==='任务', 'LOW':list.type ==='需求', 'CRITICAL':list.type ==='缺陷'}"></span>
            <span>{{ list.taskName }}
            <el-tag v-show="list.priority === 1" type="danger" effect="dark" style="margin-left: 10px;border-radius: 18px;">紧急</el-tag>
          </span>
            <!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
            <div style="float: right; padding: 3px 0" >
              <el-select
                v-model="list.status"
                placeholder="请选择"
                @change="setTaskStatusInWork(list.id,list.status)"
                :disabled="statusDisabled"
                style="width: 100px;margin-top: -10px;margin-right: -10px"
              >
                <el-option
                  v-for="item in statusSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div @click="showTaskInfo(list.id)" style="cursor: pointer">
            <div class="content">
              {{ list.taskContent }}
            </div>
            <div class="bottom">
              {{ list.projectName }}
              <span style="margin-left: 20px"
                    class="priority-icon el-icon-top"
                    :class="{'CRITICAL':list.priority === 1,'MAJOR':list.priority === 2,
                    'NORMAL':list.priority === 3,'LOW':list.priority === 4,'TRIVIAL':list.priority === 5 }"
              ></span>
              <div class="image">
                <!--              <img :src="user.userFace" :alt="user.name" :title="user.name" class="userface-img">-->
                <el-avatar size="small" :src="user.userFace"></el-avatar>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </el-col>
  <el-drawer
    class="title"
    title="任务详情"
    :visible.sync="drawer"
    :direction="direction"
    append-to-body
    :before-close="handleClose">
    <div>
      <el-form :model="taskInfoForm"   ref="taskInfoForm" label-width="100px">
        <el-form-item label="任务名称" prop="taskName" class="lavel">
          <el-input type="text" v-model="taskInfoForm.taskName" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="任务内容" prop="taskContent"  class="lavel">
          <el-input type="textarea" v-model="taskInfoForm.taskContent" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="taskCreater"  class="lavel">
          <div  style="width: 476px;display: inline-flex;border: 1px solid #dedede;
                  height: 38px;border-radius: 5px;cursor: pointer;align-items: center;
                  font-size: 13px;padding-left: 28px;box-sizing: border-box;background-color: #F5F7FA">
            <el-avatar size="small" :src="taskInfoForm.createrFace" style="float: left;margin-left: -17px"></el-avatar>
            <div style="float: left;margin-left: 10px">
              <span style="color:#C0C4CC;">{{ taskInfoForm.createrName }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="任务类型" prop="type"  class="lavel">
          <div  style="width: 476px;display: inline-flex;border: 1px solid #dedede;
                  height: 38px;border-radius: 5px;cursor: pointer;align-items: center;
                  font-size: 13px;padding-left: 28px;box-sizing: border-box;background-color: #F5F7FA">
             <span class="el-icon-star-on "
                   style="float: left;margin-left: -10px"
                   :class="{'NORMAL':taskInfoForm.type ==='任务', 'LOW':taskInfoForm.type ==='需求', 'CRITICAL':taskInfoForm.type ==='缺陷'}"></span>
            <div style="float: left;margin-left: 10px">
              <span style="color:#C0C4CC;">{{ taskInfoForm.type }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="优先级" prop="priority" style="color: #0e79f3"  class="lavel">
          <div  style="width: 476px;display: inline-flex;border: 1px solid #dedede;
                  height: 38px;border-radius: 5px;cursor: pointer;align-items: center;
                  font-size: 13px;padding-left: 28px;box-sizing: border-box;background-color: #F5F7FA">
             <span class="el-icon-top"
                   style="float: left;margin-left: -10px"
                   :class="{'CRITICAL':taskInfoForm.priority === 1,'MAJOR':taskInfoForm.priority === 2,
                    'NORMAL':taskInfoForm.priority === 3,'LOW':taskInfoForm.priority === 4,'TRIVIAL':taskInfoForm.priority === 5 }"></span>
            <div style="float: left;margin-left: 10px">
              <span style="color:#C0C4CC;">{{ priorityValue[taskInfoForm.priority] }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="计划时间" prop="time"  class="lavel">
          <el-date-picker
            v-model= "taskInfoForm.date"
            disabled
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务状态" prop="status"  class="lavel">
          <el-select v-model="taskInfoForm.status" placeholder="请选择"  @change="setTaskStatus" :disabled="statusDisabled">
            <el-option
              v-for="item in statusSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
  <div>
    <el-dialog
      append-to-body
      title="拒绝原因"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form :model="taskForm" :rules="taskRules" ref="taskForm">
          <el-form-item prop="workId">
            <el-input type="textarea" auto-complete="false"  v-model="taskForm.rejectReason" placeholder="请输入拒绝原因"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doReject('taskForm')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import taskAPI from "../../api/task";
export default {
  name: "myTask",
  data(){
    return {
      user: JSON.parse(window.sessionStorage.getItem('userInfo')),
      todoList:{},
      todoCount:0,
      doingList:{},
      doingCount:0,
      doneList:{},
      doneCount:0,
      priorityCss:{},
      drawer: false,
      direction: 'rtl',
      taskInfoForm:{},
      statusDisabled:false,
      rules:{
        'taskName':[{required: true, message: '请输入任务名称', trigger: 'blur'}],
        'taskContent':[{required: true, message: '请输入任务内容', trigger: 'blur'}]
      },
      statusSelect:[
        { value: 1, label: '待办的'},
        { value: 2, label: '进行中'},
        { value: 3, label: '已完成'},
        { value: 4, label: '已拒绝'},
      ],
      priorityValue:['','紧急','重要','普通','较低','最低'],
      taskForm:{
        id:'',
        staus:'',
        rejectReason:''
      },
      dialogVisible:false,
      taskRules: {
        reason :[{ required: true, message: '请输入员工号', trigger: 'blur' }]
      },
    }
  },
  methods: {
    test(){
      console.log(this.taskInfoForm);

    },
    // 任务点击方法
    showTaskInfo(id){
      console.log(this.taskInfoForm);
      this.drawer = true;
      // 获取详情信息
      this.getTaskDetail(id);

    },
    getTaskDetail(id){
      taskAPI.getTaskDetail(id).then(res => {
        if (res){
          this.taskInfoForm = res.data
          this.taskInfoForm['date'] = [this.taskInfoForm.beginDate,  this.taskInfoForm.endDate]
          console.log(this.taskInfoForm);
        }
      })
    },
    // 获取待办任务
    getTodoTask(){
      taskAPI.myStatusTask(1).then(res => {
        if (res){
          console.log(res.data);
          this.todoList = res.data;
          // this.todoList = this.statusHandle(res.data);
          this.todoCount = this.todoList.length
        }
      })
    },
    // 获取进行中任务
    getDoingTask(){
      taskAPI.myStatusTask(2).then(res => {
        if (res) {
          this.doingList = res.data;
          this.doingCount = this.doingList.length
        }
      })
    },
    // 详情处修改任务状态
    setTaskStatus(){
      this.statusDisabled = true;
      taskAPI.updateTaskInfo(this.taskInfoForm).then(res => {
        if (res){
          this.getData();
          this.getTaskDetail(this.taskInfoForm.id)
          this.statusDisabled = false;
        }
      })
    },
    doReject(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          taskAPI.updateTaskInfo(this.taskForm).then(res => {
            if (res){
              this.getData();
              this.dialogVisible = false;
            }
          })
        }else {
          return false;
        }
      })
    },
    // 工作台修改任务状态
    setTaskStatusInWork(id,status){
      let infoForm = {
        'id': id,
        'status': status
      }
      if (status === 4) {
        this.dialogVisible = true;
        this.taskForm.id = id
        this.taskForm.status = status
        return
      }

      this.statusDisabled = true;
      taskAPI.updateTaskInfo(infoForm).then(res => {
        if (res){
          this.getData();
          this.statusDisabled = false;
        }
      })
    },
    // 获取已完成任务
    getDoneTask(){
      taskAPI.myStatusTask(3).then(res => {
        if (res) {
          this.doneList = res.data;
          this.doneCount = this.doneList.length
        }
      })
    },

    getData(){
      this.getTodoTask();
      this.getDoingTask();
      this.getDoneTask();
    },
    handleClose(){
      this.drawer = false;
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>

/*.box {*/
/*  background-color: #f5f5f5;*/
/*  height: 100%;*/
/*  position: absolute;*/
/*  margin-left: 100px;*/
/*}*/

.board-body {
  width: 80%;
  height:90vh;
  background-color: #f5f5f5;
  min-width: 282px;
  margin: 10px 6px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 10px;
}
.cloumn-header{
  /*display: flex;*/
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.column-title-container{
  display: flex;
  align-items: center;
  color: #595959;
}
.column-title {
  font-size: 14px;
  font-weight: 700;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #595959;
}
.issue-count{
  margin-left: 20px;
  font-size: 12px;
}
.bottom {
  margin-top: 40px;
  line-height: 22px;
}

.image{
  padding: 0;
  float: right;
}
.content{
  align-items: center;
  justify-content: space-between;
}
.NORMAL{
  color: #0e79f3;
}
.CRITICAL{
  color: red;
}
.LOW {
  color: #09aa04;
}
.MAJOR {
  color: #f90;
}
.TRIVIAL {
  color: #a1a5a1;
}

/*.img-container{*/
/*  width: 100%;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*}*/
</style>
<style>
.lavel .el-form-item__label{
  color:#666666;
  font-weight: 700;
}
.title .el-drawer__header{
  line-height: 24px;
  font-size: 18px;
  color: #303133;
}
</style>
